<template>
	<div style="display: flex;">
		<h3 style="width: 30%;"></h3>
		<h3 style="width: 40%;">管理员 - 【学生{{actmsg[actidx]}}】</h3>
		<h3 style="width: 30%;">
			<button @click="go2Add()">学生添加</button>
		</h3>
	</div>
	<hr >
	<div style="display: flex;">
		<div style="width: 60%;">
			<table style="margin-left: 5%;line-height: 36px;">
				<tr>
					<td>学生ID：</td>
					<td>
						<input type="text" v-model="stu.uid" readonly/>
					</td>
				</tr>
				<tr>
					<td>学生姓名：</td>
					<td>
						<input type="text" v-model="stu.uname"/>
					</td>
				</tr>
				<tr v-if="actidx == 0">
					<td>学生密码：</td>
					<td>
						<input type="text" v-model="stu.pwd"/>
					</td>
				</tr>
				<tr>
					<td>学生手机号：</td>
					<td>
						<input type="text" v-model="stu.phone"/>
					</td>
				</tr>
				<tr>
					<td>学生头像：</td>
					<td>
						<input type="file" ref="img"/>
					</td>
				</tr>
				<tr>
					<td>学生班级：</td>
					<td><select v-model="stu.clz.clzno">
					<option v-for="z in clzs"
					v-bind:value="z.clzno">
						{{z.clzname}}
					</option></select></td>
				</tr>
				<tr v-if="actidx == 0">
					<td></td>
					<td><button @click="doAdd()">学生添加</button></td>
				</tr>
				<tr v-if="actidx == 1">
					<td></td>
					<td><button @click="doUpdate()">学生修改</button></td>
				</tr>
			</table>
		</div>
		<hr >
		<div style="width: 40%;">
			<img v-if="actidx == 1" style="width: 25vw;height: 25vw"
			v-bind:src="`${$ip}/api/public/showimg/${stu.pic}`">
		</div>
	</div>
</template>

<script setup>
	import axios from 'axios';
</script>
<script>
	export default{
		data(){
			return{
				clzs :[],
				stu :{uid :0,uname :'',phone :'',pwd :'',
				clz :{clzno :'',clzname :''},pic :''},
				//定义一个数组来显示不同的提示信息
				actmsg: ['添加','修改'],
				// actmsg[] 的下标， 当前的状态的下标 2, 默认显示状态
				actidx : 0,
			}
		},
		methods:{
			go2Add(){
				console.log("学生添加");
				this.actidx = 0;
				this.stu = {uid :0,uname :'',phone :'',pwd :'',
				clz :{clzno :'',clzname :''},pic :''};
				console.log(this.stu);
			},
			doAdd(){
				console.log("学生添加");
				console.log(this.stu);
				
				let fd = new FormData();
				fd.append("uname",this.stu.uname);
				fd.append("phone",this.stu.phone);
				fd.append("pwd",this.stu.pwd);
				fd.append("clz.clzno",this.stu.clz.clzno);
				
				let filex = this.$refs.img.files[0];
				fd.append("mypic",filex);
				//'multipart/form-data'
				this.$postf("/api/adm/stu/add",fd
				).then((resp)=>{
					console.log(resp);
					this.$router.push("/adm/stuShow");
					this.$store.state.erropen = true;
					this.$store.state.errmsg = "添加成功";
				})
			},
			doUpdate(){
				console.log("学生修改");
				console.log(this.stu);
				
				let fd = new FormData();
				fd.append("uid",this.stu.uid);
				fd.append("uname",this.stu.uname);
				fd.append("phone",this.stu.phone);
				fd.append("pwd",this.stu.pwd);
				fd.append("clz.clzno",this.stu.clz.clzno);
				
				let filex = this.$refs.img.files[0];
				fd.append("mypic",filex);
				
				this.$postf("/api/adm/stu/update",fd
				).then((resp)=>{
					console.log("学生修改成功");console.log(resp);
					this.$router.push("/adm/stuShow");
					this.$store.state.erropen = true;
					this.$store.state.errmsg = "修改成功";
				})
			},
			findAllClz(){
				console.log("Clz准备显示");

				this.$get("/api/adm/clz/findAll"
				).then((resp)=>{
					console.log(resp.data.data);
					this.clzs = resp.data.data;
				})
			},
		},
		mounted() {
			console.log("初始化加载数据....");
			this.stu.uid = this.$route.query.id;
			//去修改
			if(this.stu.uid > 0){
				console.log("学生修改");
				this.actidx = 1;
				
				this.$get("/api/adm/stu/findById/"+this.stu.uid
				).then((resp)=>{
					console.log(resp.data.data);
					this.stu = resp.data.data;
				})
				
			}
			this.findAllClz();
		},
	}
</script>
<style>
</style>
